<template>
    <div class="nav-header">
       <input 
            placeholder="请输入任务名称" 
            v-model="data.value"
            @keydown.enter="enterKey"
        />
    </div>
</template>

<script>
  import { defineComponent, reactive} from 'vue' 
    export default defineComponent({
        name:'navHeader',

        setup(props,ctx){
            let data = reactive({
                value:''
            })
            let enterKey = () =>{
                // console.log(data.value);
                if(data.value==''){
                    alert('待办任务不能为空')
                    return;
                }
                ctx.emit('add',data.value)
                // 清空数据输入框
                data.value = ''
            }
            return {
                data,
                enterKey
            }
        }
    })
</script>

<style lang="scss" scoped>
    
    .nav-header{
        width: 240px;
        input{
        margin-bottom: 10px;
        width: 236px;
    }
    }
</style>